import React from "react"
import styled from "styled-components"
import Button from "../../../components/Button"
import Card from "../../../components/Card"
import CardContent from "../../../components/CardContent"
import Spacer from "../../../components/Spacer"
import { NFT } from "../../../contexts/NFTs"
import useNFTs from "../../../hooks/useNFTs"

interface NFTCardProps {
    nft: NFT
}

const NFTCard: React.FC<NFTCardProps> = ({ nft }) => {
    return (
        <StyledCardWrapper>
            <Card>
                <CardContent>
                    <StyledContent>
                        <StyledTitle>{nft.name}</StyledTitle>
                        <Spacer />
                        <Button
                        // to={`/nfts/${nft.symbol}`}
                        >
                            View my holdings
                        </Button>
                    </StyledContent>
                </CardContent>
            </Card>
        </StyledCardWrapper>
    )
}

const NFTCards: React.FC = () => {
    const [nfts] = useNFTs()

    return (
        <NFTCard nft={nfts[0]}></NFTCard>
    )
}

// const RainbowLight = keyframes`

// 	0% {
// 		background-position: 0% 50%;
// 	}
// 	50% {
// 		background-position: 100% 50%;
// 	}
// 	100% {
// 		background-position: 0% 50%;
// 	}
// `

// const StyledCardAccent = styled.div`
//   background: linear-gradient(
//     45deg,
//     rgba(255, 0, 0, 1) 0%,
//     rgba(255, 154, 0, 1) 10%,
//     rgba(208, 222, 33, 1) 20%,
//     rgba(79, 220, 74, 1) 30%,
//     rgba(63, 218, 216, 1) 40%,
//     rgba(47, 201, 226, 1) 50%,
//     rgba(28, 127, 238, 1) 60%,
//     rgba(95, 21, 242, 1) 70%,
//     rgba(186, 12, 248, 1) 80%,
//     rgba(251, 7, 217, 1) 90%,
//     rgba(255, 0, 0, 1) 100%
//   );
//   background-size: 300% 300%;
//   animation: ${RainbowLight} 2s linear infinite;
//   border-radius: 12px;
//   filter: blur(6px);
//   position: absolute;
//   top: -2px;
//   right: -2px;
//   bottom: -2px;
//   left: -2px;
//   z-index: -1;
// `

// const StyledCards = styled.div`
//   width: 900px;
//   @media (max-width: 768px) {
//     width: 100%;
//   }
// `

// const StyledLoadingWrapper = styled.div`
//   align-items: center;
//   display: flex;
//   flex: 1;
//   justify-content: center;
// `

// const StyledRow = styled.div`
//   display: flex;
//   margin-bottom: ${(props) => props.theme.spacing[4]}px;
//   flex-flow: row wrap;
//   @media (max-width: 768px) {
//     width: 100%;
//     flex-flow: column nowrap;
//     align-items: center;
//   }
// `

const StyledCardWrapper = styled.div`
  display: flex;
  width: calc((900px - ${(props) => props.theme.spacing[4]}px * 2) / 3);
  position: relative;
`

const StyledTitle = styled.h4`
  color: ${(props) => props.theme.color.grey[600]};
  font-size: 24px;
  font-weight: 700;
  margin: ${(props) => props.theme.spacing[2]}px 0 0;
  padding: 0;
`

const StyledContent = styled.div`
  align-items: center;
  display: flex;
  flex-direction: column;
`

// const StyledSpacer = styled.div`
//   height: ${(props) => props.theme.spacing[4]}px;
//   width: ${(props) => props.theme.spacing[4]}px;
// `

// const StyledDetails = styled.div`
//   margin-top: ${(props) => props.theme.spacing[2]}px;
//   text-align: center;
// `

// const StyledDetail = styled.div`
//   color: ${(props) => props.theme.color.grey[500]};
// `

export default NFTCards
